<template>
  <div>
    <a-page-header title="订单详情" @back="() => $router.go(-1)"/>
    <a-card :title="orderStatus" v-if="!loading_order">
      <a :href="'/#/menu?sellerID='+orderData.sellerID"><h3>{{sellerInformation.name+' >'}}</h3></a>
      <a-card title="购物车信息">
        <a-list item-layout="horizontal" :data-source="orderData.cart">
          <a-list-item slot="renderItem" slot-scope="item, index">
            <a-list-item-meta>
              <div slot="title">{{item.thingName}}</div>
              <div slot="description">{{'x'+item.thingNumber}}</div>
              <a-avatar
                  slot="avatar"
                  :src="item.thingLogo"
              />
            </a-list-item-meta>
            <p>{{'￥'+item.singlePrice*item.thingNumber}}</p>
          </a-list-item>
          <a-divider/>
          <a-list-item>
            <a-list-item-meta :description="'x'+getPackCost">
              <p slot="title">打包盒</p>
            </a-list-item-meta>
            <p>{{'￥'+getPackCost*2}}</p>
          </a-list-item>
          <a-list-item>
            <a-list-item-meta/>
            <h3 style="font-weight: bold">{{'总计 ￥'+orderData.billSum}}</h3>
          </a-list-item>
        </a-list>
      </a-card>
      <a-card title="联系人信息" :style="{ marginTop: '16px' }">
        <p>称呼：{{orderData.contactInfo.name}}{{orderData.contactInfo.sex==1?'先生':'女士'}}</p>
        <p>电话号码：{{orderData.contactInfo.phone}}</p>
        <p>地址：{{orderData.contactInfo.region[0]+orderData.contactInfo.region[1]+orderData.contactInfo.region[2]+orderData.contactInfo.address}}</p>
      </a-card>
      <a-card title="配送信息" :style="{ marginTop: '16px' }">
        <p>骑手编号：{{orderData.senderInfo.dManID}}</p>
        <p>期望送达时间：{{orderData.contactInfo.expectedDeliverTime}}</p>
        <p>实际送达时间：{{orderData.senderInfo.practiceDeliveryTime}}</p>
      </a-card>
      <a-card title="其他订单信息" :style="{ marginTop: '16px' }">
        <p>订单号：{{orderData.orderID}}</p>
        <p>用户编号：{{orderData.userID}}</p>
        <p>订单创建时间：{{orderData.createTime}}</p>
      </a-card>
    </a-card>
    <a-skeleton :loading="loading_order"/>
  </div>
</template>

<script>
import {notification} from "ant-design-vue";

export default {
  name: "dingdan",
  data:function (){
    return {
      orderData:'',
      orderID_req:'1',
      loading_order:true,
      sellerInformation:''
    }
  },
  computed:{
    orderStatus:function (){
      if(this.orderData=='') return 'loading...'
      switch (this.orderData.orderState){
        case 0:
          return '等待用户付款'
        case 1:
          return '已付款，等待商家接单'
        case 2:
          return '商家已接单，等待骑手配送'
        case 3:
          return '骑手正在配送，请耐心等待'
        case 4:
          return '订单已完成'
        default:
          return '订单状态异常：'+this.orderData.orderState
      }
    },
    getPackCost:function (){
      let thingNum=0
      this.orderData.cart.forEach((item)=>{
        thingNum+=item.thingNumber
      })
      return thingNum
    },
  },
  methods:{
    getOrderInfo(){
      let rearUrl=this.$store.state.rear_url
      this.$axios.post('http://'+rearUrl+'/order',{
        userID:this.$store.state.userID,
        token:this.$store.state.token,
        orderID:this.orderID_req
      }).then((res)=>{
        console.log(res.data)
        if(res.data.orderInfoStatus==2){
          notification.open({
            message:'用户信息不完整',
            description:"请重新登录饿死了么账号"
          })
          window.location='/#/login'
          return
        }
        this.orderData=res.data
        this.$axios.post('http://'+rearUrl+'/sellerinfo',{
          sellerID:this.orderData.sellerID
        }).then((response=>{
          this.sellerInformation=response.data
          this.loading_order=false
        })).catch((e)=>{
          notification.open({
            message:'请求商家信息失败',
            description:"服务器错误："+e.message
          })
        })
      }).catch((err)=>{
        notification.open({
          message:'请求订单信息失败',
          description:"服务器错误："+err.message
        })
      })
    }
  },
  created:function (){
    if(this.$route.query.orderID==undefined) {
    notification.open({
      message:'非法的页面请求',
      description:"无参数的订单页面"
    })
    window.location='/#/'
    return
  }
    if(!this.$store.getters.userInfoComplete) {
      notification.open({
        message:'用户信息不完整',
        description:"请重新登录饿死了么账号"
      })
      window.location='/#/login'
      return
    }
    this.orderID_req=this.$route.query.orderID
    this.getOrderInfo()
  }
}
</script>